<template>
    <div class="srcc_0">
        <div class="srcc_1" v-for="(el, index) in config.search" :key="index">
            <span v-if="el.label">{{ el.label }}</span>
            <el-date-picker v-if="el.type == 'date'" v-model="form[el.prop]" :type="el.dtype || 'daterange'"
                range-separator="-" :format="el.format || 'YYYY-MM-DD'" :value-format="el.format || 'YYYY-MM-DD'"
                start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>

            <el-select v-else-if="el.type == 'select'" v-model="form[el.prop]" :placeholder="el.placeholder || '请选择'" :size="el.size || 'large'">
                <el-option v-for="item in el.options" :key="item.value" :label="item[el.opl] || item.label" :value="item[el.opv] || item.value"></el-option>
            </el-select>
        </div>
        <div class="srcc_2">
            <div v-if="config.search" @click="srccFn()">查询</div>
            <div v-for="(el, index) in config.topBtn" @click="el.clickFn ? el.clickFn() : ''" :key="index">{{ el.label }}</div>
            <slot name="btnsdd"></slot>
        </div>
    </div>
</template>

<script>
import 'element-plus/es/components/date-picker/style/css'
import 'element-plus/es/components/select/style/css'
import { ElDatePicker, ElSelect } from "element-plus"
import { ref } from 'vue'
export default {
    props: {
        config: {
            type: Object,
            default: () => {
                return {
                    search: [],
                    topBtn: []
                }
            }
        }
    },
    components: { ElDatePicker, ElSelect },
    setup(prop, { expose, emit }) {

        const form = ref({})
        const srccFn = () => {
            emit('search', form)
        }
        const setScree = da => {
            for (let key in da) {
                form.value[key] = da[key]
            }
        }

        expose({
            setScree,
        })
        return {
            form,
            srccFn
        }
    }
}
</script>

<style scoped>
.srcc_0 {
    margin-bottom: 40px;
}
.srcc_1 {
    display: inline-block;
    vertical-align: top;
    margin-right: 54px;
    margin-bottom: 20px;
}
.srcc_2 {
    display: inline-block;
    vertical-align: top;
}
.srcc_1>span {
    font-family: Microsoft YaHei;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    margin-right: 21px;
}
.srcc_2>div {
    display: inline-block;
    vertical-align: top;
    background: #28A4FF;
    border-radius: 60px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 34px;
    cursor: pointer;
    margin-right: 54px;
    margin-bottom: 10px;
}
</style>
